<template>
  <!-- 放置弹框 父传子控制这个弹框的打开和关闭 visible属性来自于父组件-->
  <el-dialog :visible="showDialog" title="编辑弹层" @close="closeDialog">
    <!-- 表单内容 -->
    <!--
      表单
      el-form: 绑定一个表单对象 model 绑定一个规则对象rules
      el-form-item: 指定当前表单项要使用哪条规则  prop
      el-input： 双向绑定 收集用户数据  v-model
     -->
    <el-form
      ref="roleForm"
      :model="roleForm"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="roleForm.name" />
      </el-form-item>
      <el-form-item label="角色描述" prop="description">
        <el-input v-model="roleForm.description" />
      </el-form-item>
    </el-form>
    <!-- 底部 -->
    <el-row slot="footer" type="flex" justify="center">
      <el-button size="small" @click="cancel">取消</el-button>
      <el-button size="small" type="primary" @click="confirm">确定</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
// 点击空白区域 点击叉号的动作发生在子组件内部 但是要修改的showDialog位于父组件
// 子传父 this.$emit()
// 子传父的本质：子组件发送一个通知给父组件 调用父组件中的一个方法 可以不用传参
// 父传子的注意点：类型必须匹配 而且以type为主

// 编辑
/**
   1. 使用当前点击项的id获取当前的详情完成回显 复用的是新增弹框
      回显时的关键就是给roleForm赋值  赋值完毕以后  roleForm就多了一个id

   2. 用户更改数据之后 复用大部分的新增逻辑 兜底校验 后续逻辑操作 id做判断 调用不同的接口
 */
import { addRole, getRoleDetail } from '@/api/setting'
export default {
  props: {
    showDialog: {
      type: Boolean
    }
  },
  data () {
    return {
      roleForm: {
        name: '',
        description: ''
      },
      rules: {
        name: [
          { required: true, message: '角色名称为必填', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '角色描述为必填', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    closeDialog () {
      this.$emit('close-dialog')
    },
    confirm () {
      this.$refs.roleForm.validate(async (valid) => {
        if (valid) {
          // 调用接口
          await addRole(this.roleForm)
          // 更新列表
          this.$emit('update-list')
          this.$message.success('新增成功')
          this.resetForm()
          this.$refs.addRole.resetFields()
        }
      })
    },
    cancel () {
      // 关闭弹框
      this.resetForm()
    },
    resetForm () {
      this.$emit('close-dialog')
      // 清空数据和校验痕迹
      this.roleForm = {
        name: '',
        description: ''
      }
      this.$refs.addRole.resetFields()
    },
    // 保留俩个独立的逻辑函数 不混用  而是抽象一个重置函数 在独立的基础上分别调用
    // 别追求代码的量少 以可读性 可维护性作为抽象的依据
    async fetchDetail (id) {
      const res = await getRoleDetail(id)
      this.roleForm = res.data
    }
  }
}
</script>
